<template>
  <div class="app-main-container">
    <Breadcrumb :name="translate('tcyh')" />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="translate('tcyh')" name="1">
        <div class="warnningTip">
          {{ translate("djdsftcxt") }}
        </div>
        <ListA ref="lista" />
      </el-tab-pane>
      <el-tab-pane :label="translate('lqjl')" name="2">
        <div class="warnningTip">{{ translate("ckggcgyh") }}</div>
        <ListB ref="listb" />
      </el-tab-pane>
      <el-tab-pane :label="translate('parkSet')" name="3">
        <ListC ref="listc" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ListA from './listA/index.vue'
import ListB from './listB/index.vue'
import Breadcrumb from '../application/components/Breadcrumb.vue'
import ListC from './listC/index.vue'
export default {
  name: 'ParkingDisList',
  components: {
    ListA,
    Breadcrumb,
    ListB,
    ListC
  },
  data() {
    return {
      activeName: '1'
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
  },
  mounted() {
    this.handleClick()
  },
  activated() {
    this.handleClick()
  },
  methods: {
    handleClick() {
      console.log()
      if (this.activeName === '1') {
        this.$refs.lista.loadingTable()
      } else if (this.activeName === '2') {
        this.$refs.listb.loadingTable()
      } else if (this.activeName === '3') {
        this.$refs.listc.loadingTable()
      }
    }
  }
}
</script>
